<template>
    <div class="app">
        <van-nav-bar title="搜索" left-arrow> </van-nav-bar>
        <div>
            <div class="search">
                <input
                    type="text"
                    placeholder="请输入商家或者美食名称"
                    v-model="keyword"
                />
                <van-button type="info" @click="submit">提交</van-button>
                <van-icon name="cross" v-show="del" @click="delFn" />
            </div>
        </div>
        <!-- list数组长度为0的时候隐藏搜索结果页面，反之显示界面 -->
        <div class="footer" v-show="bool">
            <div class="history">
                <span>搜索历史</span>
            </div>
            <ul>
                <li v-for="(item, index) in list" :key="index">
                    <span @click="keyword = item.name">{{ item.name }}</span>
                    <van-icon name="cross" @click="delArr(index)" />
                </li>
            </ul>
            <footer @click="delAll">清空搜索历史</footer>
        </div>
        <div class="result" v-show="bool_a">很抱歉！无搜索结果</div>
    </div>
</template>

<script>
import { search } from "../api/search";
export default {
    created() {
        //判断有历史搜索记录，则显示历史记录页面
        this.bool = this.list.length > 0 ? true : false;
    },
    data() {
        return {
            keyword: "",
            del: false,
            bool: false,
            bool_a: false,
            list: JSON.parse(localStorage.getItem("history")) || [],
        };
    },
    watch: {
        keyword(val) {
            //监听输入框，有输入显示X图标，内容置空时隐藏X图标
            this.del = val ? true : false;
        },
    },
    methods: {
        //提交事件，保存搜索的历史记录到list数组，再发现起数据请求
        submit() {
            //安全判定，输入为空提醒用户
            if (!this.keyword) {
                this.$toast("请输入内容");
                return;
            }
            search({
                geohash: "31.199014,121.433126",
                keyword: this.keyword,
            }).then((res) => {
                console.log(res);
            });

            //循环数组，判断是否存在相同的内容，存在就删除该元素
            this.list.forEach((item, index) => {
                if (item.name == this.keyword) {
                    this.list.splice(index, 1);
                }
            });

            //控制存储历史记录条数：10条
            if (this.list.length > 9) {
                this.list.splice(this.list.length - 1, 1);
            }

            //把搜索的内容添加到list数组里
            this.list.unshift({ name: this.keyword });
            //存储到本地
            localStorage.setItem("history", JSON.stringify(this.list));
            //控制搜索结果记录的显示
            this.bool_a = true;
            //控制历史搜索结果的页面显示
            this.bool = false;
        },
        //删除单个搜索记录
        delArr(id) {
            this.list.splice(id, 1);
            //判断list数组为空的时候，把历史记录页面隐藏
            this.bool = this.list.length == 0 ? false : true;
            localStorage.setItem("history", JSON.stringify(this.list));
        },
        //清空所有历史记录
        delAll() {
            this.list = [];
            this.bool = false;
            localStorage.setItem("history", JSON.stringify(this.list));
        },
        //input输入框的X图标的点击事件
        delFn() {
            this.keyword = "";
            //控制历史搜索记录的页面显示
            this.bool_a = false;
            //控制搜索结果页面的显示
            this.bool = true;
        },
    },
};
</script>

<style lang="less" scoped>
/deep/.van-nav-bar {
    background: #3190e8;
    .van-icon,
    .van-nav-bar__title {
        color: #fff;
        font-size: 20px;
        font-weight: 700;
    }
}
.app {
    height: 100vh;
    background-color: #f5f5f5;
    .search {
        padding: 10px;
        display: flex;
        position: relative;
        background-color: #fff;
        input {
            flex: 10;
            width: 330px;
            height: 33px;
            border: 0px;
            background: #f2f2f2;
            font-weight: 700;
            padding-left: 8px;
            font-size: 14px;
        }
        .van-button {
            margin-left: 5px;
            height: 33px;
            padding: 0;
            width: 60px;
        }
        .van-icon {
            position: absolute;
            top: 19px;
            right: 80px;
            color: #999;
            font-weight: 700;
        }
    }
    .footer {
        .history {
            background: #f5f5f5;
            height: 50px;
            line-height: 50px;
            padding: 0 10px;
            color: #707070;
            span {
                font-size: 18px;
                font-weight: 700;
            }
        }
        ul li {
            width: 100%;
            height: 50px;
            line-height: 50px;
            display: flex;
            align-items: baseline;
            justify-content: space-between;
            background-color: #fff;
            border-bottom: 2px solid #f5f5f5;
            span {
                padding-left: 10px;
                width: 40%;
                display: block;
            }
            .van-icon {
                width: 8%;
                margin-top: 8px;
                color: #999;
                font-weight: 700;
                text-align: center;
            }
        }
        footer {
            height: 40px;
            line-height: 40px;
            font-size: 18px;
            background-color: #fff;
            font-weight: 700;
            color: #3190e8;
            text-align: center;
        }
    }
    .result {
        height: 40px;
        line-height: 40px;
        font-size: 18px;
        background-color: #fff;
        text-align: center;
        border-top: 2px solid #f5f5f5;
    }
}
</style>